<template>
  <div class="login-container">
    <div class="login-box">
      <!-- ref:必须属性，后期方便el-form组件获取使用 -->
      <!-- model:必须属性，对表单全部数据对象进行绑定，后期表单校验会使用到 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
        <img src="./logo_index.png" alt />

        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
            <i slot="prefix" class="iconfont icon-shouji"></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入校验码">
            <i slot="prefix" class="iconfont icon-securityCode-b"></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="xieyi" style="text-align:left">
          <el-checkbox v-model="loginForm.xieyi" style="margin-right:10px"></el-checkbox>
          <span>我已阅读并同意用户协议和隐私条款</span>
        </el-form-item>

        <el-form-item>
          <el-button
            :loading="isActive"
            :disabled="isActive"
            type="primary"
            style="width:100%;"
            @click="login()"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 引入极验的gt.js文件
import '@/assets/js/gt.js'

// 引入iconfont的样式文件
import '@/assets/iconfont/iconfont.css'

export default {
  data () {
    var xieyiTest = function (rule, value, callback) {
      value ? callback() : callback(new Error('请无条件遵守规则~'))
    }
    return {
      isActive: false, // 登录按钮等待、禁用状态

      // 极验窗口对象
      ctaObj: null,

      loginForm: {
        mobile: '17611628817', // 手机号码
        code: '246810', // 校验码
        xieyi: true
      },
      // 登录校验
      loginFormRules: {
        // 校验字段：[{规则},{规则},{规则}]
        mobile: [
          { required: true, message: '麻溜的好好填手机号码~' },
          { pattern: /^1[35789]\d{9}$/, message: '能不能遵守下格式~' }
        ],
        code: [{ required: true, message: '麻溜的好好填校验码~' }],
        xieyi: [{ validator: xieyiTest }]
      }
    }
  },

  methods: {
    // 登录系统
    login () {
      // 全部表单域项目校验
      // 获得form表单组件的语句：this.$refs.loginFormRef
      // 参数valid会体现布尔值，表示校验是否成功
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          if (valid) {
            // 表单校验成功
            if (this.ctaObj !== null) {
              return this.ctaObj.verify()
            }
            // 登录按钮处于等待、禁用状态
            this.isActive = true
          }
          // A.人机交互验证
          let pro = this.$http.get(`/captchas/${this.loginForm.mobile}`)
          pro
            .then(result => {
              // 对象解构赋值
              let { data } = result.data
              // axios请求成功，生成极验验证“窗口”
              window.initGeetest(
                {
                  // 以下配置参数来自服务端 SDK
                  gt: data.gt,
                  challenge: data.challenge,
                  offline: !data.success,
                  new_captcha: true,
                  product: 'bind' // 隐藏按钮，通过登录按钮激活
                },
                captchaObj => {
                  // 这里可以调用验证实例 captchaObj 的实例方法
                  captchaObj
                    .onReady(() => {
                      // 验证码ready之后才能调用verify方法显示验证码
                      // 生成窗口
                      captchaObj.verify()
                      this.ctaObj = captchaObj
                      // 登录按钮处于等待、禁用状态
                      this.isActive = false
                    })
                    .onSuccess(() => {
                      // 人的行为正确
                      // B.axios发送请求进行账号"真实性校验"
                      captchaObj.destroy()
                      this.loginAct()
                    })
                    .onError(() => {
                      // your code
                    })
                }
              )
            })
            .catch(err => {
              return this.$message.error('获得人机密钥信息有误' + err)
            })
        }
      })
    },

    // 账号真实校验，登录后台页面
    loginAct () {
      let pro = this.$http.post('/authorizations', this.loginForm)
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            // 把服务器端返回的信息都存储给sessionStorage记录用户的信息
            // 其中token是判断用户是否处于登录状态
            window.sessionStorage.setItem(
              'userinfo',
              JSON.stringify(result.data.data)
            )
            // 进入后台系统
            this.$router.push('/home')
          }
        })
        .catch(err => {
          // return this.$message.error('用户名或密码错误！~' + err)
          // duration设置错误提示框在页面显示时长的
          return this.$message({
            type: 'error',
            message: '用户名或密码错误！~' + err,
            duration: 1500
          })
        })
    }
  },

  // 按回车键跳转页面
  created () {
    let that = this
    document.onkeypress = function (e) {
      var keycode = document.all ? event.keyCode : e.which
      if (keycode === 13) {
        that.login() // 登录方法名
        return false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  background-color: gray;
  background-image: url("./login_bg.jpg");
  background-size: cover;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 470px;
    height: 370px;
    background-color: white;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    img {
      width: 50%;
      margin: 20px 0;
    }
    .el-form {
      width: 75%;
    }
  }
}
</style>
